﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录</title>

    <script src="~/Login/js/verifyCode.js"></script>
    <link href="~/Login/css/normalize.css" rel="stylesheet" />
    <link href="~/Login/css/login.css" rel="stylesheet" />
    <link href="~/Login/css/sign-up-login.css" rel="stylesheet" />
    <link href="~/Login/css/font-awesome.4.6.0.css" rel="stylesheet" />
    <link href="~/Login/css/inputEffect.css" rel="stylesheet" />
    <link href="~/Login/css/tooltips.css" rel="stylesheet" />
    <link href="~/Login/css/verifyCode.css" rel="stylesheet" />
    <link href="~/Login/css/spop.min.css" rel="stylesheet" />


    <script src="~/Login/js/jquery.min.js"></script>
    <script src="~/Login/js/jquery-1.10.2.js"></script>
    <script src="~/Login/js/jquery.pure.tooltips.js"></script>
    <script src="~/Login/js/snow.js"></script>
    <script src="~/Login/js/spop.min.js"></script>
    <script src="~/Login/js/verifyCode.js"></script>

    <script>
        function snow() {
            // 1、定义一片雪花模板
            var flake = document.createElement('div');
            // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
            flake.innerHTML = '❅';
            flake.style.cssText = 'position:absolute;color:#fff;';

            //获取页面的高度 相当于雪花下落结束时Y轴的位置
            var documentHieght = window.innerHeight;
            //获取页面的宽度，利用这个数来算出，雪花开始时left的值
            var documentWidth = window.innerWidth;

            //定义生成一片雪花的毫秒数
            var millisec = 10;
            //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
            setInterval(function () { //页面加载之后，定时器就开始工作
                //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
                var startLeft = Math.random() * documentWidth;

                //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
                var endLeft = Math.random() * documentWidth;

                //随机生成雪花大小
                var flakeSize = 3 + 20 * Math.random();

                //随机生成雪花下落持续时间
                var durationTime = 4000 + 7000 * Math.random();

                //随机生成雪花下落 开始 时的透明度
                var startOpacity = 0.7 + 0.3 * Math.random();

                //随机生成雪花下落 结束 时的透明度
                var endOpacity = 0.2 + 0.2 * Math.random();

                //克隆一个雪花模板
                var cloneFlake = flake.cloneNode(true);

                //第一次修改样式，定义克隆出来的雪花的样式
                cloneFlake.style.cssText += `
                        left: ${startLeft}px;
                        opacity: ${startOpacity};
                        font-size:${flakeSize}px;
                        top:-25px;
                        transition:${durationTime}ms;`;

                //拼接到页面中
                document.body.appendChild(cloneFlake);

                //设置第二个定时器，一次性定时器，
                //当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
                setTimeout(function () {
                    //第二次修改样式
                    cloneFlake.style.cssText += `
                    left: ${endLeft}px;
                    top:${documentHieght}px;
                    opacity:${endOpacity};`;

                    //4、设置第三个定时器，当雪花落下后，删除雪花。
                    setTimeout(function () {
                        cloneFlake.remove();
                    }, durationTime);
                }, 0);

            }, millisec);
        }
        snow();
    </script>

    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
        }

        body {
            background-repeat: no-repeat;
            background-color: #000;
            /*防止出现向下滚动条*/
            overflow: hidden;
            background-color: #00BDDC;
            background-image: url('../../login/images/snow.jpg');
            background-size: 100% 100%;
        }

        .snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 100001;
        }
    </style>
</head>
<body>
    @*雪花*@

    <div class="snow-container"></div>

    <div id="login">
        <input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
        <input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
        <input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
        <div class="wrapper">
            @*登陆*@
            <div class="login sign-in-htm" id="app">
                <form class="container offset1 loginform" action="/Home/DoLogin" method="post">

                    <div id="owl-login" class="login-owl">
                        <div class="hand"></div>
                        <div class="hand hand-r"></div>
                        <div class="arms">
                            <div class="arm"></div>
                            <div class="arm arm-r"></div>
                        </div>
                    </div>
                    <div class="pad input-container">
                        <section class="content">
                            <span class="input input--hideo">
                                <input  name="Username" class="input__field input__field--hideo" type="text" id="login-username" autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" />
                                <label class="input__label input__label--hideo" for="login-username">
                                    <i class="fa fa-fw fa-user icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input name="pwd" class="input__field input__field--hideo" type="password" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15" />
                                <label class="input__label input__label--hideo" for="login-password">
                                    <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>



                            @*<span class="input input--hideo input--verify_code">
                                    <input class="input__field input__field--hideo" type="text" id="login-verify-code" autocomplete="off" placeholder="请输入验证码" tabindex="3" maxlength="4" />
                                    <label class="input__label input__label--hideo" for="login-verify-code">
                                        <i class="fa fa-fw fa-bell-o icon icon--hideo"></i>
                                        <span class="input__label-content input__label-content--hideo"></span>
                                    </label>
                                </span>*@
                         
                                <canvas style="display:none" class="verify-code-canvas" id="login-verify-code-canvas"></canvas>
                        </section>
                    </div>
                    <div class="form-actions">
                        <a tabindex="5" class="btn btn-link text-muted" onclick="goto_register()">注册</a>
                        <input class="btn btn-primary" type="submit" value="登录" style="color:white;" />
                    </div>
                </form>
            </div>
            @*注册*@
            <div class="login sign-up-htm">
                <form action="/Home/Zhuce" method="post" class="container offset1 loginform">

                    <div id="owl-login" class="register-owl">
                        <div class="hand"></div>
                        <div class="hand hand-r"></div>
                        <div class="arms">
                            <div class="arm"></div>
                            <div class="arm arm-r"></div>
                        </div>
                    </div>
                    <div class="pad input-container">
                        <section class="content">
                            <span class="input input--hideo">
                                <input name="Username" class="input__field input__field--hideo" type="text" id="register-username" autocomplete="off" placeholder="请输入用户名" maxlength="15" />
                                <label class="input__label input__label--hideo" for="register-username">
                                    <i class="fa fa-fw fa-user icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input name="Passwords" class="input__field input__field--hideo" type="password" id="register-password" placeholder="请输入密码" maxlength="15" />
                                <label class="input__label input__label--hideo" for="register-password">
                                    <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input name="Passwords2" class="input__field input__field--hideo" type="password" id="register-repassword" placeholder="请确认密码" maxlength="15" />
                                <label class="input__label input__label--hideo" for="register-repassword">
                                    <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input name="Email" class="input__field input__field--hideo" type="email" id="register-code" autocomplete="off" placeholder="请输入邮箱" />
                                <label class="input__label input__label--hideo" for="register-code">
                                    <i class="fa fa-fw fa-wifi icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                            <span class="input input--hideo">
                                <input name="Phone" class="input__field input__field--hideo" type="text" id="register-code" autocomplete="off" placeholder="请输入手机号" />
                                <label class="input__label input__label--hideo" for="register-code">
                                    <i class="fa fa-fw fa-wifi icon icon--hideo"></i>
                                    <span class="input__label-content input__label-content--hideo"></span>
                                </label>
                            </span>
                        </section>
                    </div>
                    <div class="form-actions">
                        <a class="btn pull-left btn-link text-muted" onclick="goto_login()">返回登录</a>
                        <input class="btn btn-primary" type="submit" onclick="register()" value="注册" style="color:white;" />
                    </div>
                </form>
            </div>
        </div>
    </div>
 
    <script>

        (function () {
            // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
            if (!String.prototype.trim) {
                (function () {
                    // Make sure we trim BOM and NBSP
                    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                    String.prototype.trim = function () {
                        return this.replace(rtrim, '');
                    };
                })();
            }

            [].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
                // in case the input is already filled..
                if (inputEl.value.trim() !== '') {
                    classie.add(inputEl.parentNode, 'input--filled');
                }

                // events:
                inputEl.addEventListener('focus', onInputFocus);
                inputEl.addEventListener('blur', onInputBlur);
            });

            function onInputFocus(ev) {
                classie.add(ev.target.parentNode, 'input--filled');
            }

            function onInputBlur(ev) {
                if (ev.target.value.trim() === '') {
                    classie.remove(ev.target.parentNode, 'input--filled');
                }
            }
        })();

        $(function () {
            $('#login #login-password').focus(function () {
                $('.login-owl').addClass('password');
            }).blur(function () {
                $('.login-owl').removeClass('password');
            });
            $('#login #register-password').focus(function () {
                $('.register-owl').addClass('password');
            }).blur(function () {
                $('.register-owl').removeClass('password');
            });
            $('#login #register-repassword').focus(function () {
                $('.register-owl').addClass('password');
            }).blur(function () {
                $('.register-owl').removeClass('password');
            });
            $('#login #forget-password').focus(function () {
                $('.forget-owl').addClass('password');
            }).blur(function () {
                $('.forget-owl').removeClass('password');
            });
        });

        function goto_register() {
            $("#register-username").val("");
            $("#register-password").val("");
            $("#register-repassword").val("");
            $("#register-code").val("");
            $("#tab-2").prop("checked", true);
        }

        function goto_login() {
            $("#login-username").val("");
            $("#login-password").val("");
            $("#tab-1").prop("checked", true);
        }

        function goto_forget() {
            $("#forget-username").val("");
            $("#forget-password").val("");
            $("#forget-code").val("");
            $("#tab-3").prop("checked", true);
        }

            //function login() {//登录
            //    var username = $("#login-username").val(),
            //        password = $("#login-password").val(),
            //        verifycode = $("#login-verify-code").val(),
            //        validatecode = null;
            //    //判断用户名密码是否为空
            //    if (username == "") {
            //        $.pt({
            //            target: $("#login-username"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "用户名不能为空"
            //        });
            //        return;
            //    }
            //    if (password == "") {
            //        $.pt({
            //            target: $("#login-password"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "密码不能为空"
            //        });
            //        return;
            //    }
            //    if (verifycode == "") {
            //        $.pt({
            //            target: $("#login-verify-code-canvas"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "验证码不能为空"
            //        });
            //        return;
            //    }
            //    if (timeout_flag) {
            //        $.pt({
            //            target: $("#login-verify-code-canvas"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "验证码已经失效"
            //        });
            //        return;
            //    }
            //    //用户名只能是15位以下的字母或数字
            //    var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
            //    if (!regExp.test(username)) {
            //        $.pt({
            //            target: $("#login-username"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "用户名必须为15位以下的字母或数字"
            //        });
            //        return;
            //    }
            //    //判断验证码是否正确
            //    if (verifycode != show_num.join("")) {
            //        $.pt({
            //            target: $("#login-verify-code-canvas"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "验证码不正确"
            //        });
            //        return;
            //    }

            ////    //登录
            ////    //调用后台登录验证的方法
            ////    alert('登录成功');
            ////    return false;
            ////}




            ////注册
            //function register() {
            //    var username = $("#register-username").val(),
            //        password = $("#register-password").val(),
            //        repassword = $("#register-repassword").val(),
            //        code = $("#register-code").val(),
            //        flag = false,
            //        validatecode = null;
            //    //判断用户名密码是否为空
            //    if (username == "") {
            //        $.pt({
            //            target: $("#register-username"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "用户名不能为空"
            //        });
            //        flag = true;
            //    }
            //    if (password == "") {
            //        $.pt({
            //            target: $("#register-password"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "密码不能为空"
            //        });
            //        flag = true;
            //    } else {
            //        if (password != repassword) {
            //            $.pt({
            //                target: $("#register-repassword"),
            //                position: 'r',
            //                align: 't',
            //                width: 'auto',
            //                height: 'auto',
            //                content: "两次输入的密码不一致"
            //            });
            //            flag = true;
            //        }
            //    }
            //    //用户名只能是15位以下的字母或数字
            //    var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
            //    if (!regExp.test(username)) {
            //        $.pt({
            //            target: $("#register-username"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "用户名必须为15位以下的字母或数字"
            //        });
            //        flag = true;
            //    }
            //    //检查用户名是否已经存在
            //    //调后台代码检查用户名是否已经被注册

            //    //检查注册码是否正确
            //    //调后台方法检查注册码，这里写死为11111111
            //    if (code != '11111111') {
            //        $.pt({
            //            target: $("#register-code"),
            //            position: 'r',
            //            align: 't',
            //            width: 'auto',
            //            height: 'auto',
            //            content: "注册码不正确"
            //        });
            //        flag = true;
            //    }


            //    if (flag) {
            //        return false;
            //    } else {//注册
            //        spop({
            //            template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录',
            //            position: 'top-center',
            //            style: 'success',
            //            autoclose: 3000,
            //            onOpen: function () {
            //                var second = 2;
            //                var showPop = setInterval(function () {
            //                    if (second == 0) {
            //                        clearInterval(showPop);
            //                    }
            //                    $('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于' + second + '秒后返回登录');
            //                    second--;
            //                }, 1000);
            //            },
            //            onClose: function () {
            //                goto_login();
            //            }
            //        });
            //        return false;
            //    }
            //}


    </script>
</body>
</html>